<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        background-color: black;
      }

      .hero {
        display: block;
        margin: 0 auto;
        padding: 0px;
        font-size: 16px;
        width: 400px;
        height: 36px;
        border-radius: 18px;
        outline: none;
        border: 1px solid #593f08;
        text-indent: 15px;
        background-color: rgba(89, 63, 8, 0.4);
        color: #d0b886;
      }

      .bg {
        width: 1144px;
        height: 635px;
        margin: 10px auto;
        background: url("images/yangpi_bg02.png") no-repeat;
      }

      .bg .left {
        width: 450px;
        height: 580px;
        float: left;
        margin-left: 56px;
        position: relative;
      }

      .left span {
        color: white;
      }

      .name_con {
        margin-top: 305px;
        font-size: 16px;
        color: #593f08;
        font-family: "楷体";
        font-weight: bold;
        line-height: 29px;
      }

      .showname {
        position: absolute;
        left: 100px;
        top: 131px;
        width: 240px;
        line-height: 60px;
        text-align: center;
        font-size: 30px;
        color: #593f08;
        font-weight: bold;
      }

      .left .name {
        font-size: 16px;
        color: #593f08;
        font-family: "楷体";
        font-weight: bold;
        line-height: 29px;
      }

      .title_con {
        font-size: 16px;
        color: #593f08;
        font-family: "楷体";
        font-weight: bold;
        line-height: 29px;
      }

      .left .title {
        font-size: 16px;
        color: #593f08;
        font-family: "楷体";
        font-weight: bold;
        line-height: 29px;
      }

      .story_con {
        margin: 0px;
        font-size: 16px;
        color: #593f08;
        font-family: "楷体";
        font-weight: bold;
        line-height: 29px;
        width: 460px;
        height: 200px;
        overflow: auto;
      }

      .left .story {
        font-size: 16px;
        color: #593f08;
        font-family: "楷体";
        font-weight: bold;
        line-height: 29px;
      }

      .right {
        width: 547px;
        height: 560px;
        float: right;
        margin: 32px 42px 0 0;
        border: 2px solid #593f08;
        background-image: url(http://ossweb-img.qq.com/images/lol/web201310/skin/big17000.jpg);
        background-position: right top;
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>
  </head>

  <body>
    <input type="text" class="hero" placeholder="输入英雄按下回车查询" />

    <div class="bg">
      <div class="left">
        <div class="showname">提莫</div>
        <div class="name_con">名称：<span class="name">提莫</span></div>
        <div class="title_con">外号：<span class="title">迅捷斥候</span></div>
        <p class="story_con">
          简介：<span class="story">团战可以输，大龙可以丢，高地可以破，提莫必须死</span
          >
        </p>
      </div>

      <div class="right"></div>
    </div>
  </body>
</html>

<script src="./lib/jquery.js"></script>
<script>
    $(function () {
        // 1. 给输入框设置键盘事件,监听回车
        $('.hero').on('keydown',function (e) {
            if (e.keyCode == 13) {
                // 2. 获得输入的英雄名称
                let name = $(this).val().trim();

                // 3. 发起ajax请求,获得英雄信息
                $.ajax({
                    type: 'get',
                    url: 'https://autumnfish.cn/api/hero/info',
                    data: {
                        name: name
                    },
                    success: function (backData) {
                        console.log(backData);
                        // 4. 处理数据,渲染指定结构
                        $('.showname, .name').text(backData.name);
                        $('.title').text(backData.title);
                        $('.story').text(backData.story);

                        // 5. 设置右侧容器的背景图片
                        // 注意,背景图片的赋值,需要拼接url(路径)
                        $('.right').css('backgroundImage', `url(${backData.bg})`);
                    }
                })
            }
        })
    })

</script>
